.carousel {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: $carousel_bg_main;
  border-radius: $carousel_border_radius;
}

.carousel-container {
  width: 100%;
  height: auto;
}

.carousel-item {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;

  clip-path: circle(30% at 0 50%); 
  z-index: $carousel_item_z_index;
  
  > * {
    height: 100%;
    width: 100%;
  }

  > img {
    object-fit: cover;
    object-position: center;
  }

  &.active {
    z-index: $carousel_item_z_index_active;
    clip-path: circle(150% at 0 50%);
    transition: clip-path $carousel_transition linear;
  }
}

.carousel-dots {
  z-index: $carousel_dots_z_index;
  position: absolute;
  bottom: $carousel_dots_bottom;
  width: auto;
  padding: $carousel_dots_padding;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.carousel-dot {
  border-radius: 50%;
  width: $carousel_dot_width;
  height: $carousel_dot_height;
  border: $carousel_dot_border_width solid $carousel_dot_border_color;
  background-color: transparent;
  color: $carousel_dot_color;

  & + & {
    margin-left: $carousel_dot_margin_left;
  }

  &.active {
    border-color: currentColor;
  }
}

.carousel-control {
  position: absolute;
  z-index: $carousel_control_z_index;
  top: calc(50% - 30px);
  width: $carousel_control_width;
  height: $carousel_control_height;
  border: none;
  outline: none;
  background-color: transparent;
  
  &,
  > * {
    font-size: $carousel_control_font_size;
    color: $carousel_control_color;
  }

  &.active,
  &:hover,
  &:focus {
    background-color: transparent;
    &,
    > * {
      color: $carousel_control_color_active;
    }
  }
}

.carousel-control:nth-child(1) {
  left: 0;
}

.carousel-control:nth-child(2) {
  right: 0;
}
